<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-container>
    <!--左侧导航-->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-col :span="12"style="width: 100%">
            <div style="background: #b3d8ff;width:100%">
            <span style="font-size: 30px">订单分类</span>
            </div>
            <el-menu
                    class="el-menu-vertical-demo"
                    @select="selectOrder"
                    >
                <el-menu-item index="0">
                    <i class="el-icon-menu"></i>
                    <span slot="title">全部订单</span>
                </el-menu-item>
                <el-menu-item v-for="list in orderStatusList" :index="list.id">
                    <i class="el-icon-document"></i>
                    <span slot="title">{{list.allStatus}}</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-aside>
    <!--右侧列表-->
    <el-main>
            <el-button type="warning" icon="el-icon-plus" @click="dialogFormVisible = true">添加订单</el-button>
            <br>
        <!--模糊查询-->
        <el-form :inline="true" :model="formOrder" class="demo-form-inline">
            <el-form-item label="订单编号">
                <el-input v-model="formOrder.orderId" placeholder="请输入订单编号"></el-input>
            </el-form-item>
<!--            <el-form-item label="产品名称">
                <el-input v-model="formOrder.productName" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="formOrder.customName" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="企业类型">
                <el-select v-model="formOrder.customType" placeholder="选择企业类型">
                    <el-option label="国企" value="国企"></el-option>
                    <el-option label="私企" value="私企"></el-option>
                </el-select>
                &lt;!&ndash;<el-input v-model="formOrder.customType" placeholder="选择企业类型"></el-input>&ndash;&gt;
            </el-form-item>
            <br>
            <el-form-item label="产品类型">
                <el-input v-model="formOrder.productType" placeholder="请输入产品类型"></el-input>
            </el-form-item>-->
            <el-form-item label="交易时间">
                <el-date-picker
                        v-model="formOrder.dealTime"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
                <!--<el-input v-model="formOrder.dealTime" placeholder="请输入企业名称"></el-input>-->
            </el-form-item>
<!--            <el-form-item label="状态">
                <el-select v-model="formOrder.orderStatus" placeholder="选择状态">
                    <el-option v-for="list in orderStatusList" :label="list.allStatus" :value="list.id"></el-option>
                </el-select>
                &lt;!&ndash;<el-input v-model="formOrder.orderStatus" placeholder="选择状态"></el-input>&ndash;&gt;
            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="2"><span>每页显示条数:</span></el-col>
            <el-col :span="6">
                <!--每页显示条数-->
                <el-pagination
                        @size-change="handleSizeChange"
                        :current-page="current"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="5"
                        layout="sizes"
                        :total="total">
                </el-pagination>
            </el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>


        </el-row>
        <!--数据表格-->
        <el-table
                ref="orderTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    type="index"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    sortable
                    prop="orderId"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.orderId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品名称"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.product==null"></span>
                    <span v-else>{{ scope.row.product.pname }}</span>
                    <!--<span >{{ scope.row.product.pName }}</span>-->
                </template>
            </el-table-column>
            <el-table-column
                    label="企业名称"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.company==null"></span>
                    <span v-else>{{scope.row.company.companyName}}</span>
                    <!--<span >{{ scope.row.company.companyName }}</span>-->
                </template>
            </el-table-column>
            <el-table-column
                    label="企业类型"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.company==null"></span>
                    <span v-else>{{ scope.row.company.companyType }}</span>
                    <!--<span >{{ scope.row.company.companyType }}</span>-->
                </template>
            </el-table-column>
            <el-table-column
                    label="交易金额"
                    sortable
                    prop="money"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.money }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易时间"
                    sortable
                    prop="dealTime"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.dealTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品类型"
            >
                <template slot-scope="scope">
                    <!--<span >{{ scope.row.product.penterprise }}</span>-->
                    <span v-if="scope.row.product==null"></span>
                    <span v-else>{{scope.row.product.penterprise}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="数量"
                    sortable
                    prop="number"
            >
                <template slot-scope="scope">
                    <span >{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.t_orderStatus==null"></span>
                    <span v-else>{{ scope.row.t_orderStatus.allStatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="说明">
                <template slot-scope="scope">
                    <span >{{ scope.row.explains }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-s-operation"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
                <span v-if="current * pageSize > total">第{{current * pageSize - pageSize + 1}}到{{total}}条记录,共{{total}}条</span>
                <span v-else>第{{current * pageSize - pageSize + 1}}到{{current * pageSize}}条记录,共{{total}}条</span>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">
                <!--分页-->
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        :current-page="current"
                        @current-change="loadPage"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <!--添加订单的对话框-->
        <el-dialog title="添加订单" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="order">
                 <el-form-item label="产品名称" :label-width="formLabelWidth">
                     <el-select v-model="order.productId" placeholder="请选择产品">
                         <!--v-model与value双向绑定-->
                         <el-option
                                 v-for="item in orderProduct"
                                 :key="item.id"
                                 :label="item.pname"
                                 :value="item.id"
                                 >
                         </el-option>
                     </el-select>
                     <!--<el-input v-model="order.productId" autocomplete="off"></el-input>-->
                 </el-form-item>
                <el-form-item label="客户名称" :label-width="formLabelWidth">
                    <el-select v-model="order.customId" placeholder="请选择产品">
                        <!--v-model与value双向绑定-->
                        <el-option
                                v-for="item in orderCompany"
                                :key="item.id"
                                :label="item.companyName"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <!--<el-input v-model="order.customId" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="交易金额" :label-width="formLabelWidth">
                    <el-input type="number" step = "0.1" v-model="order.money" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="交易方式" :label-width="formLabelWidth">
                    <el-select v-model="order.orderType" placeholder="选择交易方式">
                        <el-option label="线上支付" value="线上支付"></el-option>
                        <el-option label="线下支付" value="线下支付"></el-option>
                        <el-option label="在线支付" value="在线支付"></el-option>
                    </el-select>
                    <!--<el-input v-model="order.orderType" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input type="number" v-model="order.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="交易时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="order.dealTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                    <!--<el-input v-model="order.dealTime" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="order.orderStatus" placeholder="请选择产品">
                        <!--v-model与value双向绑定-->
                        <el-option
                                v-for="item in orderStatusList"
                                :key="item.id"
                                :label="item.allStatus"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrder">确 定</el-button>
            </div>
        </el-dialog>
        <!--订单详情对话框-->

        <el-dialog title="订单详情" :visible.sync="orderDetails" @close="closeOrderDetails">
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <span>订单编号:</span><span>{{orderOne.orderId}}</span>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <span>企业名称:</span><span v-if="orderOne.company==null">null</span>
                    <span v-else>{{orderOne.company.companyName}}</span>&nbsp;&nbsp;
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <span>产品名称:</span><span v-if="orderOne.product==null">null</span>
                    <span v-else>{{ orderOne.product.pname }}</span>&nbsp;
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <span>企业类型:</span><span v-if="orderOne.company==null">null</span>
                    <span v-else>{{ orderOne.company.companyType }}</span>
                </div></el-col>
            </el-row>
            <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">
                <span>产品编号:</span><span v-if="orderOne.product==null">null</span>
                <span v-else>{{ orderOne.product.id }}</span>&nbsp;&nbsp;
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">
                <span>购买数量:</span><span>{{orderOne.number}}</span>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">
                <span>支付方式:</span><span>{{orderOne.orderType}}</span>
            </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <span>产品类型:</span><span v-if="orderOne.product==null">null</span>
                    <span v-else>{{orderOne.product.penterprise}}</span>
                </div></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <span>状态:</span><span v-if="orderOne.t_orderStatus==null">null</span>
                    <span v-else>{{ orderOne.t_orderStatus.allStatus }}</span>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">
                    <span>交易时间:</span><span >{{ orderOne.dealTime }}</span>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <span>说明:</span><span >{{ orderOne.explains }}</span>
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="orderDetails = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-main>
    </el-container>
</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:null,//表格数据
                total:0,//总条数
                current:1,//当前页数
                pageSize:5, //每页条数
                formOrder:{//模糊查询
                    orderId:'',//订单编号
                    //productName:'',//产品名称
                    //customName:'',//企业名称
                    //customType:'',//企业类型
                    //productType:'',//产品类型
                    dealTime:'',//交易时间
                    //orderStatus:''//状态
                },
                orderStatusList:null, //所有订单状态
                orderState:0,//判断是全部订单还是点击订单状态
                dialogFormVisible: false,//控制添加订单对话框的显示
                order:{ //添加数据
                    productId:'',//产品名称
                    customId:'',//客户名称
                    money:'',//交易金额
                    orderType:'',//交易方式
                    number:'',//数量
                    dealTime:'',//交易时间
                    orderStatus:''//订单状态
                },
                orderDetails:false, //控制订单详情对话框的显示
                orderOne:{//订单详情信息
                    orderId:'',//订单编号
                    TProduct:'',//商品表
                    company:'',//企业表
                    dealTime:null,//交易时间
                    t_orderStatus:'',//订单状态表
                    number:'',//数量
                    orderType:'',//支付方式
                    dealTime:'',//交易时间
                    explains:''//说明
                },
                orderProduct:null,//商品表
                orderCompany:null,//公司表
                formLabelWidth: '120px' //表单标签的宽度
            }
        },
        methods: {
            //左侧导航栏状态点击事件
            selectOrder(index){
                this.current=1
                this.orderState = index
                axios.get("/orders-all?current="+this.current+"&pageSize="+this.pageSize+"&orderState="+this.orderState+"&orderId="+this.formOrder.orderId+"&dealTime="+this.formOrder.dealTime).then(value=>{
                    if(value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.size;
                    }
                })
            },
            //操作:查看详情
            handleEdit(index, row) {
                console.log(index, row);
                this.orderOne = row;
                this.orderDetails = true;
            },
            //当页跳转的方法
            loadPage(current,pageSize){
                this.current = current;
                    axios.get("/orders-all?current="+current+"&pageSize="+this.pageSize+"&orderState="+this.orderState+"&orderId="+this.formOrder.orderId+"&dealTime="+this.formOrder.dealTime).then(value=>{
                        if(value.data.code == 1){
                            this.tableData = value.data.data.records;
                            this.total = value.data.data.total;
                            this.current = value.data.data.current;
                            this.pageSize = value.data.data.size;
                        }
                    })
            },
            //每页条数改变是触发
            handleSizeChange(pageSize){
                this.current = 1;
                this.pageSize = pageSize;
                axios.get("/orders-all?current="+this.current+"&pageSize="+this.pageSize+"&orderState="+this.orderState+"&orderId="+this.formOrder.orderId+"&dealTime="+this.formOrder.dealTime).then(value=>{
                    if(value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.size;
                    }
                })
            },
            //模糊查询
            onSubmit(){
                this.current=1
                axios.get("/orders-all?current="+this.current+"&pageSize="+this.pageSize+"&orderState="+this.orderState+"&orderId="+this.formOrder.orderId+"&dealTime="+this.formOrder.dealTime).then(value=>{
                    if(value.data.code == 1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.size;
                    }
                })
            },
            //关闭添加订单对话框
            closeMyDialog(){
                //清空数据
                this.order={ //添加数据
                    productId:'',//产品名称
                        customId:'',//客户名称
                        money:'',//交易金额
                        orderType:'',//交易方式
                        number:'',//数量
                        dealTime:'',//交易时间
                        orderStatus:''//订单状态
                }
                this.loadPage(this.current,this.pageSize);
            },
            //关闭订单详情对话框
            closeOrderDetails(){
                this.orderOne={//订单详情信息
                    orderId:'',//订单编号
                        TProduct:'',//商品表
                        company:'',//企业表
                        dealTime:null,//交易时间
                        t_orderStatus:'',//订单状态表
                        number:'',//数量
                        orderType:'',//支付方式
                        dealTime:'',//交易时间
                        explains:''//说明
                }
                this.loadPage(this.current,this.pageSize);
            },
            //添加订单的方法
            saveOrder(){
                axios.post("/order",this.order).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.current,this.pageSize);
                    }
                });
                this.dialogFormVisible = false;//控制添加订单对话框的显示
            }
        },
        mounted(){
            //分页
            this.loadPage(this.current,this.pageSize);

            //订单状态
            axios.get("/orderStatus1").then(value => {
                if (value.data.code == 1){
                    this.orderStatusList = value.data.data
                }
            });
            //商品表
            axios.get("/orderProduct").then(value => {
                if (value.data.code == 1){
                    this.orderProduct = value.data.data
                }
            });
            //公司表
            axios.get("/companies").then(value => {
                if (value.data.code == 1){
                    this.orderCompany = value.data.data
                }
            });
        }
    })
</script>
</body>
</html>